<template>
  <div>
	  <div id="colorlib-page">
		<div id="colorlib-hero" class="js-fullheight">
			<div class="owl-carousel">
				<div class="item">
					<div class="hero-flex js-fullheight">
						<div class="col-three-forth" v-show="i===index" v-for="(item,i) in home" :key="item.id">
							<div class="hero-img js-fullheight">
								<img :src="item.h_img" alt=""  >
							</div>
						</div>
						<div class="col-one-forth js-fullheight">
							<div class="display-t js-fullheight">
								<div class="display-tc js-fullheight">
									<h2 class="number" v-show="i===index" v-for="(item,i) in home" :key="item.id">{{item.h_time}}</h2>
									<div class="text-inner">
										<div class="desc" v-show="i===index" v-for="(item,i) in home" :key="item.id">
											<span class="tag">{{item.h_title}}</span>
											<h2>{{item.h_subhead}}</h2>
											<p>{{item.h_content}}</p>
											<p><a :href="/#/+item.h_link" class="btn-view">{{item.h_name}}<i class="icon-arrow-right3"></i></a></p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
  </div>
</template>

<script>
import {home} from '../api/index.js';
export default {
	name: 'home',
	methods:{
        async posthome(){ //async异步请求
          //使用api/index.js里面的home方法
          var result=await home();
        //   console.log(result);
          //将请求到的结果赋值到当前data的home内
          this.home=result['message']['home'];
        },
	  },
	 
	mounted(){
		setInterval(()=>{{
			++this.index
			if(this.index>this.home.length-1) this.index=0
		}},3000),
		this.posthome();
	},
  data () {
    return {
			home:[],
			index:0,
			
    }
  }
}

</script>

<style scoped>

</style>
